
import React, { useState } from 'react';
import './index.less';
import * as Inter from '../interface';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/redux';
import { updateAssemblyActive } from '@/redux/state/com';

const Nav = () => {
  let assemblyActive = useSelector((state: RootState) => state.ComState.assemblyActive);
  const dispatch = useDispatch();
  const [list, setList] = useState(Inter.list);

  //render 列表项
  function renderList() {
    return list.map((item, index) => {
      return (
        <div
          onClick={() => {
            dispatch(updateAssemblyActive(index));
          }}
          className={`nav-item nav-${assemblyActive == index ? 'active' : ''}`}
          key={index}
        >
          {item.label}
        </div>
      );
    });
  }

  return <div className="nav">{renderList()}</div>;
};

export default Nav;
